<template>
  <div class="event-content" :style="{ height: isHidden ? 'auto' : '275px' }">
    <div class="tab-select-new">
      <p class="event-name">事件列表</p>
      <div class="shouq" @click="toggleShow">
        {{ isHidden ? "展开" : "收起" }}

        <CaretBottom
          style="width: 1em; height: 1em; margin-right: 8px"
          v-if="isHidden"
        />
        <CaretTop
          style="width: 1em; height: 1em; margin-right: 8px"
          v-if="!isHidden"
        />
      </div>
    </div>

    <div class="table-box" v-show="!isHidden">
      <!-- <el-table :data="tableData" border style="width: 100%">
        <el-table-column
          v-for="(column, index) in tableColumns"
          :key="index"
          :prop="column.prop"
          :label="column.label"
          :width="column.width"
          show-overflow-tooltip
        >
          <template #default="scope">
            <div v-if="column.format" v-html="column.render(scope.row)"></div>
            <span v-else>{{ scope.row[column.prop] }}</span>
          </template>
        </el-table-column>
      </el-table> -->
      <TableRandom
        :tableData="tableData"
        :tableColumns="tableColumns"
      ></TableRandom>
    </div>
  </div>
</template>

<script setup>
import TableRandom from "@/components/tableRandom.vue";
import { MinxfunssJ } from "./sjcol.js";
import { MinxfunCoulmns } from "./device.js";
import { getSceneEvents, getvarityeventlist4pc } from "@/api/zlcj.js";
let isHidden = ref(false);
const toggleShow = () => {
  isHidden.value = !isHidden.value;
};
const route = useRoute();
const {
  nlColumns,
  fhColumns,
  cwColumns,
  cgColumns,
  zyColumns,
  ljColumns,
  qxzColumns,
  scColumns,
  sqColumns,
} = MinxfunssJ();
const { findSenceType } = MinxfunCoulmns();

// 定义表格数据
let tableData = ref([]);
// 定义表头部

let tableColumns = ref([]);

// 获取表格列
const getCol = () => {
  let type = route.params.id;
  switch (type) {
    case "nlfx":
      tableColumns.value = nlColumns;
      break;
    case "aqfh":
      tableColumns.value = fhColumns;
      break;
    case "cwjk":
      tableColumns.value = cwColumns;
      break;
    case "cgz":
      tableColumns.value = cgColumns;
      break;
    case "zy":
      tableColumns.value = zyColumns;
      break;
    case "lj":
      tableColumns.value = ljColumns;
      break;
    case "qxz":
      tableColumns.value = qxzColumns;
      break;
    case "shhj":
      tableColumns.value = scColumns;
      break;
    case "ddc":
      tableColumns.value = sqColumns;
      break;
    case "crk":
      tableColumns.value = sqColumns;
      break;
    case "gkpw":
      tableColumns.value = sqColumns;
      break;
    case "ryjk":
      tableColumns.value = sqColumns;
      break;
    default:
      tableColumns.value = nlColumns;
      break;
  }
};

// 获取表格数据

const getData = async () => {
  // 获取表格数据
  try {
    let obj = {
      sceneCode: await findSenceType(route.params.id),
    };
    let res = {};
    if (
      route.params.id == "aqfh" ||
      route.params.id == "zy" ||
      route.params.id == "cgz" ||
      route.params.id == "lj" ||
      route.params.id == "qxz" ||
      route.params.id === "ddc" ||
      route.params.id === "crk" ||
      route.params.id === "gkpw" ||
      route.params.id === "ryjk"
    ) {
      res = await getvarityeventlist4pc(obj);
    } else {
      res = await getSceneEvents(obj);
    }

    if (route.params.id == "zy") {
      tableData.value = res.data.busiEventSpecialInfos;
    } else if (route.params.id == "cgz") {
      tableData.value = res.data.busiEventList;
    } else if (route.params.id == "cwjk") {
      tableData.value = res.data.busiEventList.slice(0, 2).map((item) => {
        const valueContent = item.eventData.split(", ")[0].split(":");
        const value = valueContent[1].split(",");
        const waterLevelLabel = valueContent[0];
        const waterLevelValue = value[0];
        const thresholdLabel = value[1];
        const thresholdValue = valueContent[2];
        return {
          deviceName: item.deviceName,
          waterLevelLabel: waterLevelLabel,
          thresholdLabel: thresholdLabel,
          waterLevelValue: waterLevelValue,
          thresholdValue: thresholdValue,
          eventTime: item.eventTime,
          deviceId: item.deviceId,
        };
      });
    } else if (route.params.id == "nlfx") {
      tableData.value = res.data.waterLogLogList;
    } else if (route.params.id == "aqfh") {
      tableData.value = res.data.busiEventSpecialInfos;
    } else if (route.params.id == "lj") {
      tableData.value = res.data.busiEventList;
    } else if (route.params.id == "qxz") {
      tableData.value = res.data.busiEventSpecialInfos;
    } else if (
      route.params.id === "ddc" ||
      route.params.id === "crk" ||
      route.params.id === "gkpw" ||
      route.params.id === "ryjk"
    ) {
      tableData.value = res.data.busiEventList;
    }
  } catch (e) {
    console.error(e);
  }
};

onMounted(() => {
  getCol();
  getData();
});
</script>

<style lang="scss">
.event-content {
  padding: 14px 20px;
  width: 450px;
  // height: 300px;
  height: 27%;
  background: #ffffff;
  box-shadow: 0px 0px 29px 0px rgba(70, 102, 149, 0.3);
  border-radius: 12px;
  margin-top: 10px;
  .tab-select-new {
    display: flex;
    justify-content: space-between;
    .shouq {
      cursor: pointer;
      margin-left: 10px;
      font-weight: 500;
      font-size: 14px;
      color: #2263bf;
      line-height: 20px;
      letter-spacing: 1px;
      text-align: left;
      font-style: normal;
    }
  }
  .event-name {
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 14px;
    color: #333333;
  }
  .table-box {
    margin-top: 10px;
    height: calc(100% - 40px);
    .el-table {
      height: 100%;
    }
    thead {
      .el-table__cell {
        text-align: center;
        background: rgba(142, 191, 255, 0.22);
        color: #333333;
        border-color: rgba(142, 191, 255, 0.22);
      }
    }
    .el-table table {
      border-spacing: 0 0px;
      font-size: 12px;
    }
  }
  .el-scrollbar__wrap {
    background: #fff !important;
  }
}
</style>
